<template>
  <section class="page system-log">
    <data-form
      :model="listQuery"
      @handleResetForm="follFeedback"
      @onSearch="refreshData"
      :page="pageService"
      :rules="rules"
    >
      <template slot="inputs">
        <el-form-item label="模板代码" prop="templateCode">
          <el-input v-model.trim="listQuery.templateCode" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="模板名称">
          <el-input v-model.trim="listQuery.templateName" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="逾期期数">
          <el-select v-model="listQuery.overdueStage">
            <el-option
              v-for="{ index, code, name } in $dict.getDictData(
                'OverduePeriodStatus'
              )"
              :key="index"
              :label="name"
              :value="code"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="listQuery.archive">
            <el-option label="启用" value="0"></el-option>
            <el-option label="禁用" value="1"></el-option>
          </el-select>
        </el-form-item>
      </template>
    </data-form>
    <data-box :data="dataList" :page="pageService" @onPageChange="refreshData">
      <template slot="buttons">
        <el-button @click="getDetail('add')">创建</el-button>
        <el-button @click="getAllFn('add')">一键同步短信模板</el-button>
      </template>
      <template slot="columns">
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="操作">
          <template slot-scope="scope">
            <el-button @click="getDetail('see', scope)" type="text">查看</el-button>
            <el-button @click="getDetail('edit', scope)" type="text"
              >编辑</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          :min-width="$helper.getColumnWidth(3)"
          label="模板代码"
          prop="templateCode"
          show-overflow-tooltip
        />
        <el-table-column
          :min-width="$helper.getColumnWidth(4)"
          label="模板名称"
          prop="templateName"
          show-overflow-tooltip
        />
        <el-table-column
          :min-width="$helper.getColumnWidth(4)"
          label="模板内容"
          prop="templateContent"
          show-overflow-tooltip
        />
        <el-table-column
          :min-width="$helper.getColumnWidth(4)"
          label="状态"
          prop="archive"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div v-if="scope.row.archive !== 'null'">
              {{ scope.row.archive === "0" ? "启用" : "禁用" }}
            </div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column
          :min-width="$helper.getColumnWidth(4)"
          label="逾期期数"
          prop="overdueStage"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          :min-width="$helper.getColumnWidth(2)"
          label="创建人"
          prop="operatorRealName"
          show-overflow-tooltipshow-overflow-tooltip
        />
        <el-table-column
          :min-width="$helper.getColumnWidth(4)"
          label="创建时间"
          prop="createTime"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | dateTimeFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :min-width="$helper.getColumnWidth(2)"
          label="编辑人"
          prop="operatorRealName"
          show-overflow-tooltip
        />
        <el-table-column
          :min-width="$helper.getColumnWidth(4)"
          label="编辑时间"
          prop="updateTime"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.updateTime | dateTimeFormat }}</span>
          </template>
        </el-table-column>
      </template>
    </data-box>
    <!-- 创建编辑弹框 -->
    <el-dialog
      width="900px"
      :center="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="dialog.open"
      title="配置短信模板"
      @close="closeDialog"
    >
      <message-demo
        @close="closeDialog"
        :type="type"
        :num="num"
        :tableRow="tableRow"
      ></message-demo>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Layout, Dependencies } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import { UserService } from "~/services/management-service/user.service";
import MessageDemo from "~/components/system-manage/message-demo/message-demo.vue";

@Layout("workspace")
@Component({
  components: {
    MessageDemo
  }
})
export default class SystemLog extends Vue {
  @Dependencies(UserService) private userService: UserService;
  @Dependencies(PageService)
  private pageService: PageService;
  private num: any = 'add';
  private listQuery: any = {
    templateName: "",
    templateCode: "",
    overdueStage: "",
    templateContent: ""
  };
  private rules: any = {
    templateCode: [
      { required: false, message: '请输入模板代码', trigger: 'blur' },
      { pattern: /^[A-Za-z0-9]+$/, message: "请输入英文字母或数字", trigger: "blur" }
    ]
  };
  private options: any = [];
  private dataList: any[] = [];
  private tableRow: any = {}; //查看或编辑某一条row
  private dialog: any = { open: false };
  private type: string = "";

  private mounted() {
    this.refreshData();
  }

  private refreshData() {
    this.userService
      .getAllSmsTemplateInfo(this.listQuery, this.pageService, {})
      .subscribe(data => {
        this.dataList = data;
        data = data.map(item => {
          item.createTime = item.timeCreated;
          item.updateTime = item.timeModified;
          item.archive = String(item.archive);
        });
      });
  }

  private getDetail(type, scope) {
    // 增加-修改-查看
    this.type = type;
    if (type === "add") {
      this.num = 'add';
      this.dialog.open = true;
    } else {
      this.num = 'update';
      this.dialog.open = true;
      this.tableRow = scope.row;
    }
  }

  private getAllFn (){
    this.userService.oneClickSmsTemplateSync().subscribe(data=> { this.$message.success('同步成功') })
  }

  private closeDialog() {
    this.dialog.open = false;
    this.refreshData();
    this.tableRow = {};
  }

  /**
   * 重置numberRange
   */
  private follFeedback() {
    this.listQuery.templateCode = "";
    this.listQuery.templateName = "";
    this.listQuery.overdueStage = "";
    this.listQuery.archive = "";
  }
}
</script>

<style lang="less">
.block {
  .el-range-separator {
    line-height: 15px !important;
  }
}
</style>
